<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="24" :xs="24">
        <el-form v-show="showSearch" ref="queryForm" :model="queryParams" :inline="true" label-width="68px">
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="phone" placeholder="请输入手机号" clearable size="small" style="width: 350px "
              @keyup.enter.native="handleQuery" />
          </el-form-item>
          <el-form-item label="姓名" prop="name">
            <el-input v-model="name" placeholder="请输入姓名" clearable size="small" style="width: 350px"
              @keyup.enter.native="handleQuery" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">

          <el-col :span="1.5">
            <el-select v-model="noScheduleDriverId" placeholder="请选择" @change="handleNoScheduleDriverChange">
              <el-option v-for="item in noScheduleDriverList" :key="item.noScheduleDriverId" :label="item.nameAndPhone"
                :value="item.noScheduleDriverId">
              </el-option>
            </el-select>
            <el-button type="primary" plain icon="el-icon-delete" size="mini" @click="handleAdd">新增</el-button>
          </el-col>
        </el-row>

        <el-table :data="schduleList" border style="width: 100%">
          <el-table-column fixed prop="driverName" label="姓名-手机号" width="150"></el-table-column>
          <el-table-column prop="one" label="1号" width="60">
            <template slot-scope="scope">
              <span :style="getCellStyle(scope.row.one)">{{ scope.row.one }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="two" label="2号" width="60">

            <template slot-scope="scope">
              <span :style="getCellStyle(scope.row.two)">{{ scope.row.two }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="three" label="3号" width="60">

            <template slot-scope="scope">
              <span :style="getCellStyle(scope.row.three)">{{ scope.row.three }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="four" label="4号" width="60">

            <template slot-scope="scope">
              <span :style="getCellStyle(scope.row.four)">{{ scope.row.four }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="five" label="5号" width="60">

            <template slot-scope="scope">
              <span :style="getCellStyle(scope.row.five)">{{ scope.row.five }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="six" label="6号" width="60">

            <template slot-scope="scope">
              <span :style="getCellStyle(scope.row.six)">{{ scope.row.six }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="seven" label="7号" width="60">

            <template slot-scope="scope">
              <span :style="getCellStyle(scope.row.seven)">{{ scope.row.seven }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="eight" label="8号" width="60">

            <template slot-scope="scope">
              <span :style="getCellStyle(scope.row.eight)">{{ scope.row.eight }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="nine" label="9号" width="60">

            <template slot-scope="scope">
              <span :style="getCellStyle(scope.row.nine)">{{ scope.row.nine }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="ten" label="10号" width="60">

            <template slot-scope="scope">
              <span :style="getCellStyle(scope.row.ten)">{{ scope.row.ten }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="eleven" label="11号" width="60">

            <template slot-scope="scope">
              <span :style="getCellStyle(scope.row.eleven)">{{ scope.row.eleven }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="twelve" label="12号" width="60">

            <template slot-scope="scope">
              <span :style="getCellStyle(scope.row.twelve)">{{ scope.row.twelve }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="thirteen" label="13号" width="60">

            <template slot-scope="scope">
              <span :style="getCellStyle(scope.row.thirteen)">{{ scope.row.thirteen }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="fourteen" label="14号" width="60">

            <template slot-scope="scope">
              <span :style="getCellStyle(scope.row.fourteen)">{{ scope.row.fourteen }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="fifteen" label="15号" width="60">

            <template slot-scope="scope">
              <span :style="getCellStyle(scope.row.fifteen)">{{ scope.row.fifteen }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="sixteen" label="16号" width="60">

            <template slot-scope="scope">
              <span :style="getCellStyle(scope.row.sixteen)">{{ scope.row.sixteen }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="seventeen" label="17号" width="60">

            <template slot-scope="scope">
              <span :style="getCellStyle(scope.row.seventeen)">{{ scope.row.seventeen }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="eighteen" label="18号" width="60">

            <template slot-scope="scope">
              <span :style="getCellStyle(scope.row.eighteen)">{{ scope.row.eighteen }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="nineteen" label="19号" width="60">

            <template slot-scope="scope">
              <span :style="getCellStyle(scope.row.nineteen)">{{ scope.row.nineteen }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="twenty" label="20号" width="60">

            <template slot-scope="scope">
              <span :style="getCellStyle(scope.row.twenty)">{{ scope.row.twenty }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="twentyOne" label="21号" width="60">

            <template slot-scope="scope">
              <span :style="getCellStyle(scope.row.twentyOne)">{{ scope.row.twentyOne }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="twentyTwo" label="22号" width="60">

            <template slot-scope="scope">
              <span :style="getCellStyle(scope.row.twentyTwo)">{{ scope.row.twentyTwo }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="twentyThree" label="23号" width="60">

            <template slot-scope="scope">
              <span :style="getCellStyle(scope.row.twentyThree)">{{ scope.row.twentyThree }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="twentyFour" label="24号" width="60">

            <template slot-scope="scope">
              <span :style="getCellStyle(scope.row.twentyFour)">{{ scope.row.twentyFour }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="twentyFive" label="25号" width="60">

            <template slot-scope="scope">
              <span :style="getCellStyle(scope.row.twentyFive)">{{ scope.row.twentyFive }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="twentySix" label="26号" width="60">

            <template slot-scope="scope">
              <span :style="getCellStyle(scope.row.twentySix)">{{ scope.row.twentySix }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="twentySeven" label="27号" width="60">

            <template slot-scope="scope">
              <span :style="getCellStyle(scope.row.twentySeven)">{{ scope.row.twentySeven }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="twentyEight" label="28号" width="60">

            <template slot-scope="scope">
              <span :style="getCellStyle(scope.row.twentyEight)">{{ scope.row.twentyEight }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="twentyNine" label="29号" width="60">

            <template slot-scope="scope">
              <span :style="getCellStyle(scope.row.twentyNine)">{{ scope.row.twentyNine }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="thirty" label="30号" width="60">

            <template slot-scope="scope">
              <span :style="getCellStyle(scope.row.thirty)">{{ scope.row.thirty }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="thirtyOne" label="31号" width="60">

            <template slot-scope="scope">
              <span :style="getCellStyle(scope.row.thirtyOne)">{{ scope.row.thirtyOne }}</span>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="60">

            <template slot-scope="scope">
              <!-- <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button> -->
              <el-button type="text" @click="handleUpdate(scope.row)" size="small">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-pagination :page-size.sync="queryParams.pageSize" layout="total, sizes, prev, pager, next, jumper"
      :total="total" :page-sizes="[5, 10, 15, 20]" :current-page.sync="queryParams.pageNum"
      @current-change="handleCurrentChange" @size-change="handleCurrentChange" />









    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="1号" prop="one">
              <el-select v-model="form.one" placeholder="请选择">
                <el-option :key="'A'" label="白班" :value="'A'" />
                <el-option :key="'B'" label="晚班" :value="'B'" />
                <el-option :key="'C'" label="旷工" :value="'C'" />
                <el-option :key="'D'" label="休息" :value="'D'" />
                <el-option :key="'E'" label="请假" :value="'E'" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="2号" prop="two">
              <el-select v-model="form.two" placeholder="请选择">
                <el-option :key="'A'" label="白班" :value="'A'" />
                <el-option :key="'B'" label="晚班" :value="'B'" />
                <el-option :key="'C'" label="旷工" :value="'C'" />
                <el-option :key="'D'" label="休息" :value="'D'" />
                <el-option :key="'E'" label="请假" :value="'E'" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="3号" prop="three">
              <el-select v-model="form.three" placeholder="请选择">
                <el-option :key="'A'" label="白班" :value="'A'" />
                <el-option :key="'B'" label="晚班" :value="'B'" />
                <el-option :key="'C'" label="旷工" :value="'C'" />
                <el-option :key="'D'" label="休息" :value="'D'" />
                <el-option :key="'E'" label="请假" :value="'E'" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="4号" prop="four">
              <el-select v-model="form.four" placeholder="请选择">
                <el-option :key="'A'" label="白班" :value="'A'" />
                <el-option :key="'B'" label="晚班" :value="'B'" />
                <el-option :key="'C'" label="旷工" :value="'C'" />
                <el-option :key="'D'" label="休息" :value="'D'" />
                <el-option :key="'E'" label="请假" :value="'E'" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="5号" prop="five">
              <el-select v-model="form.five" placeholder="请选择">
                <el-option :key="'A'" label="白班" :value="'A'" />
                <el-option :key="'B'" label="晚班" :value="'B'" />
                <el-option :key="'C'" label="旷工" :value="'C'" />
                <el-option :key="'D'" label="休息" :value="'D'" />
                <el-option :key="'E'" label="请假" :value="'E'" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="6号" prop="six">
              <el-select v-model="form.six" placeholder="请选择">
                <el-option :key="'A'" label="白班" :value="'A'" />
                <el-option :key="'B'" label="晚班" :value="'B'" />
                <el-option :key="'C'" label="旷工" :value="'C'" />
                <el-option :key="'D'" label="休息" :value="'D'" />
                <el-option :key="'E'" label="请假" :value="'E'" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="7号" prop="seven">
              <el-select v-model="form.seven" placeholder="请选择">
                <el-option :key="'A'" label="白班" :value="'A'" />
                <el-option :key="'B'" label="晚班" :value="'B'" />
                <el-option :key="'C'" label="旷工" :value="'C'" />
                <el-option :key="'D'" label="休息" :value="'D'" />
                <el-option :key="'E'" label="请假" :value="'E'" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="8号" prop="eight">
              <el-select v-model="form.eight" placeholder="请选择">
                <el-option :key="'A'" label="白班" :value="'A'" />
                <el-option :key="'B'" label="晚班" :value="'B'" />
                <el-option :key="'C'" label="旷工" :value="'C'" />
                <el-option :key="'D'" label="休息" :value="'D'" />
                <el-option :key="'E'" label="请假" :value="'E'" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="9号" prop="nine">
              <el-select v-model="form.nine" placeholder="请选择">
                <el-option :key="'A'" label="白班" :value="'A'" />
                <el-option :key="'B'" label="晚班" :value="'B'" />
                <el-option :key="'C'" label="旷工" :value="'C'" />
                <el-option :key="'D'" label="休息" :value="'D'" />
                <el-option :key="'E'" label="请假" :value="'E'" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="10号" prop="ten">
              <el-select v-model="form.ten" placeholder="请选择">
                <el-option :key="'A'" label="白班" :value="'A'" />
                <el-option :key="'B'" label="晚班" :value="'B'" />
                <el-option :key="'C'" label="旷工" :value="'C'" />
                <el-option :key="'D'" label="休息" :value="'D'" />
                <el-option :key="'E'" label="请假" :value="'E'" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="11号" prop="eleven">
              <el-select v-model="form.eleven" placeholder="请选择">
                <el-option :key="'A'" label="白班" :value="'A'" />
                <el-option :key="'B'" label="晚班" :value="'B'" />
                <el-option :key="'C'" label="旷工" :value="'C'" />
                <el-option :key="'D'" label="休息" :value="'D'" />
                <el-option :key="'E'" label="请假" :value="'E'" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="12号" prop="twelve">
              <el-select v-model="form.twelve" placeholder="请选择">
                <el-option :key="'A'" label="白班" :value="'A'" />
                <el-option :key="'B'" label="晚班" :value="'B'" />
                <el-option :key="'C'" label="旷工" :value="'C'" />
                <el-option :key="'D'" label="休息" :value="'D'" />
                <el-option :key="'E'" label="请假" :value="'E'" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="13号" prop="thirteen">
              <el-select v-model="form.thirteen" placeholder="请选择">
                <el-option :key="'A'" label="白班" :value="'A'" />
                <el-option :key="'B'" label="晚班" :value="'B'" />
                <el-option :key="'C'" label="旷工" :value="'C'" />
                <el-option :key="'D'" label="休息" :value="'D'" />
                <el-option :key="'E'" label="请假" :value="'E'" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="14号" prop="fourteen">
              <el-select v-model="form.fourteen" placeholder="请选择">
                <el-option :key="'A'" label="白班" :value="'A'" />
                <el-option :key="'B'" label="晚班" :value="'B'" />
                <el-option :key="'C'" label="旷工" :value="'C'" />
                <el-option :key="'D'" label="休息" :value="'D'" />
                <el-option :key="'E'" label="请假" :value="'E'" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="15号" prop="fifteen">
              <el-select v-model="form.fifteen" placeholder="请选择">
                <el-option :key="'A'" label="白班" :value="'A'" />
                <el-option :key="'B'" label="晚班" :value="'B'" />
                <el-option :key="'C'" label="旷工" :value="'C'" />
                <el-option :key="'D'" label="休息" :value="'D'" />
                <el-option :key="'E'" label="请假" :value="'E'" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="16号" prop="sixteen">
              <el-select v-model="form.sixteen" placeholder="请选择">
                <el-option :key="'A'" label="白班" :value="'A'" />
                <el-option :key="'B'" label="晚班" :value="'B'" />
                <el-option :key="'C'" label="旷工" :value="'C'" />
                <el-option :key="'D'" label="休息" :value="'D'" />
                <el-option :key="'E'" label="请假" :value="'E'" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="17号" prop="seventeen">
              <el-select v-model="form.seventeen" placeholder="请选择">
                <el-option :key="'A'" label="白班" :value="'A'" />
                <el-option :key="'B'" label="晚班" :value="'B'" />
                <el-option :key="'C'" label="旷工" :value="'C'" />
                <el-option :key="'D'" label="休息" :value="'D'" />
                <el-option :key="'E'" label="请假" :value="'E'" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="18号" prop="eighteen">
              <el-select v-model="form.eighteen" placeholder="请选择">
                <el-option :key="'A'" label="白班" :value="'A'" />
                <el-option :key="'B'" label="晚班" :value="'B'" />
                <el-option :key="'C'" label="旷工" :value="'C'" />
                <el-option :key="'D'" label="休息" :value="'D'" />
                <el-option :key="'E'" label="请假" :value="'E'" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="19号" prop="nineteen">
              <el-select v-model="form.nineteen" placeholder="请选择">
                <el-option :key="'A'" label="白班" :value="'A'" />
                <el-option :key="'B'" label="晚班" :value="'B'" />
                <el-option :key="'C'" label="旷工" :value="'C'" />
                <el-option :key="'D'" label="休息" :value="'D'" />
                <el-option :key="'E'" label="请假" :value="'E'" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="20号" prop="twenty">
              <el-select v-model="form.twenty" placeholder="请选择">
                <el-option :key="'A'" label="白班" :value="'A'" />
                <el-option :key="'B'" label="晚班" :value="'B'" />
                <el-option :key="'C'" label="旷工" :value="'C'" />
                <el-option :key="'D'" label="休息" :value="'D'" />
                <el-option :key="'E'" label="请假" :value="'E'" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="21号" prop="twentyOne">
              <el-select v-model="form.twentyOne" placeholder="请选择">
                <el-option :key="'A'" label="白班" :value="'A'" />
                <el-option :key="'B'" label="晚班" :value="'B'" />
                <el-option :key="'C'" label="旷工" :value="'C'" />
                <el-option :key="'D'" label="休息" :value="'D'" />
                <el-option :key="'E'" label="请假" :value="'E'" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="22号" prop="twentyTwo">
              <el-select v-model="form.twentyTwo" placeholder="请选择">
                <el-option :key="'A'" label="白班" :value="'A'" />
                <el-option :key="'B'" label="晚班" :value="'B'" />
                <el-option :key="'C'" label="旷工" :value="'C'" />
                <el-option :key="'D'" label="休息" :value="'D'" />
                <el-option :key="'E'" label="请假" :value="'E'" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="23号" prop="twentyThree">
              <el-select v-model="form.twentyThree" placeholder="请选择">
                <el-option :key="'A'" label="白班" :value="'A'" />
                <el-option :key="'B'" label="晚班" :value="'B'" />
                <el-option :key="'C'" label="旷工" :value="'C'" />
                <el-option :key="'D'" label="休息" :value="'D'" />
                <el-option :key="'E'" label="请假" :value="'E'" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="24号" prop="twentyFour">
              <el-select v-model="form.twentyFour" placeholder="请选择">
                <el-option :key="'A'" label="白班" :value="'A'" />
                <el-option :key="'B'" label="晚班" :value="'B'" />
                <el-option :key="'C'" label="旷工" :value="'C'" />
                <el-option :key="'D'" label="休息" :value="'D'" />
                <el-option :key="'E'" label="请假" :value="'E'" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="25号" prop="twentyFive">
              <el-select v-model="form.twentyFive" placeholder="请选择">
                <el-option :key="'A'" label="白班" :value="'A'" />
                <el-option :key="'B'" label="晚班" :value="'B'" />
                <el-option :key="'C'" label="旷工" :value="'C'" />
                <el-option :key="'D'" label="休息" :value="'D'" />
                <el-option :key="'E'" label="请假" :value="'E'" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="26号" prop="twentySix">
              <el-select v-model="form.twentySix" placeholder="请选择">
                <el-option :key="'A'" label="白班" :value="'A'" />
                <el-option :key="'B'" label="晚班" :value="'B'" />
                <el-option :key="'C'" label="旷工" :value="'C'" />
                <el-option :key="'D'" label="休息" :value="'D'" />
                <el-option :key="'E'" label="请假" :value="'E'" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="27号" prop="twentySeven">
              <el-select v-model="form.twentySeven" placeholder="请选择">
                <el-option :key="'A'" label="白班" :value="'A'" />
                <el-option :key="'B'" label="晚班" :value="'B'" />
                <el-option :key="'C'" label="旷工" :value="'C'" />
                <el-option :key="'D'" label="休息" :value="'D'" />
                <el-option :key="'E'" label="请假" :value="'E'" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="28号" prop="twentyEight">
              <el-select v-model="form.twentyEight" placeholder="请选择">
                <el-option :key="'A'" label="白班" :value="'A'" />
                <el-option :key="'B'" label="晚班" :value="'B'" />
                <el-option :key="'C'" label="旷工" :value="'C'" />
                <el-option :key="'D'" label="休息" :value="'D'" />
                <el-option :key="'E'" label="请假" :value="'E'" />
                <el-option :key="'D'" label="休息" :value="'D'" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="29号" prop="twentyNine">
              <el-select v-model="form.twentyNine" placeholder="请选择">
                <el-option :key="'A'" label="白班" :value="'A'" />
                <el-option :key="'B'" label="晚班" :value="'B'" />
                <el-option :key="'C'" label="旷工" :value="'C'" />
                <el-option :key="'D'" label="休息" :value="'D'" />
                <el-option :key="'E'" label="请假" :value="'E'" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="30号" prop="thirty">
              <el-select v-model="form.thirty" placeholder="请选择">
                <el-option :key="'A'" label="白班" :value="'A'" />
                <el-option :key="'B'" label="晚班" :value="'B'" />
                <el-option :key="'C'" label="旷工" :value="'C'" />
                <el-option :key="'D'" label="休息" :value="'D'" />
                <el-option :key="'E'" label="请假" :value="'E'" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="31号" prop="thirtyOne">
              <el-select v-model="form.thirtyOne" placeholder="请选择">
                <el-option :key="'A'" label="白班" :value="'A'" />
                <el-option :key="'B'" label="晚班" :value="'B'" />
                <el-option :key="'C'" label="旷工" :value="'C'" />
                <el-option :key="'D'" label="休息" :value="'D'" />
                <el-option :key="'E'" label="请假" :value="'E'" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>



      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>
import { searchScheduleList, updateScheduleById, getScheduleById, addSchedule, selectNoScheduleDriverList } from '@/api/system/schedule'

export default {
  name: 'User',
  data() {
    return {
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 5,

      },
      noScheduleDriverList: [],
      title: '',
      // 是否显示弹出层
      open: false,
      // 显示搜索条件
      showSearch: true,
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 选中数组
      ids: [],
      // 表单参数
      form: {},
      phone: "",
      name: "",
      noScheduleDriverId: '',
      nameAndPhone: '',
      schduleList: []
    }
  },
  watch: {},
  created() {
    this.search(this.phone, this.name, 1, this.queryParams.pageSize);
    this.selectNoScheduleDriverList();
  },
  methods: {
    handleClick(row) {
      console.log(row);
    },
    getCellStyle(value) {
      const style = {};

      if (value === '白班') {
        style.backgroundColor = 'lightgreen';
      } else if (value === '请假') {
        style.backgroundColor = 'yellow';
      } else if (value === '旷工') {
        style.backgroundColor = 'lightcoral';
      } else if (value === '休息') {
        style.backgroundColor = 'lightgray';
      } else if (value === '晚班') {
        style.backgroundColor = 'lightblue';
      }
      return style;
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.loading = true;
      this.search(this.phone, this.name, 1, this.queryParams.pageSize);
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    licenseCancel() {
      this.licenseOpen = false
      this.licenseReset()
    },
    handleCurrentChange() {
      this.search(this.phone, this.name, this.queryParams.pageNum, this.queryParams.pageSize);

    },
    /** 查询排班列表 */
    search(phone, name, page, size) {
      this.loading = true;
      searchScheduleList(phone, name, page, size).then((response) => {
        this.schduleList = response.rows; // 赋值数据
        this.total = response.total;
        this.loading = false;
      }).catch((error) => {
        console.error(error);
        this.loading = false;
      });
    },
    selectNoScheduleDriverList() {
      this.loading = true;
      selectNoScheduleDriverList().then((response) => {
        this.noScheduleDriverList = response; // 赋值数据
        // this.total = 3;
        this.loading = false;
      }).catch((error) => {
        console.error(error);
        this.loading = false;
      });
    },
    // 根据选择器的值更新 nameAndPhone
    handleNoScheduleDriverChange() {
      const selectedDriver = this.noScheduleDriverList.find(driver => driver.noScheduleDriverId === this.noScheduleDriverId);
      this.nameAndPhone = selectedDriver ? selectedDriver.nameAndPhone : '';
    },
    handleAdd() {
      if (this.noScheduleDriverId && this.nameAndPhone && this.nameAndPhone.trim() !== '') {
        this.loading = true;
        addSchedule(this.noScheduleDriverId, this.nameAndPhone)
          .then(() => {
            location.reload();
          });
      } else {
        alert("需要先选择待安排的驾驶员");
      }
    },
    // 表单重置
    reset() {
      this.form = {
        id: undefined,
        one: undefined,
        two: undefined,
        three: undefined,
        four: undefined,
        five: undefined,
        six: undefined,
        seven: undefined,
        eight: undefined,
        nine: undefined,
        ten: undefined,
        eleven: undefined,
        twelve: undefined,
        thirteen: undefined,
        fourteen: undefined,
        fifteen: undefined,
        sixteen: undefined,
        seventeen: undefined,
        eighteen: undefined,
        nineteen: undefined,
        twenty: undefined,
        twentyOne: undefined,
        twentyTwo: undefined,
        twentyThree: undefined,
        twentyFour: undefined,
        twentyFive: undefined,
        twentySix: undefined,
        twentySeven: undefined,
        twentyEight: undefined,
        twentyNine: undefined,
        thirty: undefined,
        thirtyOne: undefined
      }

      this.resetForm('form');
    },
    handleUpdate(row) {
      this.reset()
      this.title = '排班安排';
      this.open = true
      console.log(row.id)
      getScheduleById(row.id).then((response) => {
        this.form.id = response.id;
        this.form.one = response.one;
        this.form.two = response.two;
        this.form.three = response.three;
        this.form.four = response.four;
        this.form.five = response.five;
        this.form.six = response.six;
        this.form.seven = response.seven;
        this.form.eight = response.eight;
        this.form.nine = response.nine;
        this.form.ten = response.ten;
        this.form.eleven = response.eleven;
        this.form.twelve = response.twelve;
        this.form.thirteen = response.thirteen;
        this.form.fourteen = response.fourteen;
        this.form.fifteen = response.fifteen;
        this.form.sixteen = response.sixteen;
        this.form.seventeen = response.seventeen;
        this.form.eighteen = response.eighteen;
        this.form.nineteen = response.nineteen;
        this.form.twenty = response.twenty;
        this.form.twentyOne = response.twentyOne;
        this.form.twentyTwo = response.twentyTwo;
        this.form.twentyThree = response.twentyThree;
        this.form.twentyFour = response.twentyFour;
        this.form.twentyFive = response.twentyFive;
        this.form.twentySix = response.twentySix;
        this.form.twentySeven = response.twentySeven;
        this.form.twentyEight = response.twentyEight;
        this.form.twentyNine = response.twentyNine;
        this.form.thirty = response.thirty;
        this.form.thirtyOne = response.thirtyOne;
        console.log(response)
      });
    },

    /** 提交按钮 */
    submitForm: function () {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.open = false;

          updateScheduleById(this.form).then((response) => {
            this.$modal.msgSuccess('修改成功');
            this.open = false;
            this.queryParams.pageNum = 1;
            this.searchScheduleList();
          });
          this.search(this.phone, this.name, 1, this.queryParams.pageSize);
          this.selectNoScheduleDriverList();
        }
      });
    },
  }
}
</script>